﻿@model HQPad.Models.BattleboardPageModel

@{
    ViewBag.Title = "Battleboard";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="@Url.Content("~/Scripts/jquery-ui-1.10.3.custom.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var power = @Html.Raw(Model != null ? Model.TotalPower.ToString() : "0");

        $('.talismanSlider').slider({ 
            min: 0, 
            max: power - 1, 
            value: 16,
            slide: function(event, ui) {  
                if (ui.value > 0)
                    $('.powerValue').html(ui.value.toString());
                else
                    $('.powerValue').html('0');

                $('#powerInTalisman').val(ui.value);
            }
        });
    });
</script>
@Html.Partial("~/Views/Shared/Character/CharacterTabs.cshtml")

<section class="content full-width flush-with-nav flat-top">
    <h2>Battleboard</h2>

    <div class="block">
        <p>Generate a prinatable battleboard for your character.</p>
        <p>Select the style of battle board you want from those available below. <br />
        Click the Generate button to download your battleboard file.<br />
        Note that battleboard files are not saved with your character.</p>
    </div>

    <div class="generate-battleboard ">
        <fieldset class="form form-bg form-wide-label">
            <legend>Battleboard options</legend>
         @using (Html.BeginForm("Generate", "Battleboard", new { name = Model.CharacterName }, FormMethod.Post, new { @name = "generateBattleboardForm", @id = "generateBattleboardForm" }))
         {
           <div class="field-item">
                <div class="label"><label for="boardType">Select battleboard type:</label></div>
                <select name="boardType">
                    <option value="Balanced" checked="checked">Balanced</option>
                </select>
            </div>
             
            if (Model.HasTalisman)
            {
               <p>As your character has a Talisman you must select how much power is held within it.</p>
               <div class="field-item">
                    <div class="label"><label for="boardType">Power in Talisman: (<span class="powerValue value">16</span>)</label></div>
                    <div class="slider">
                        <div class="talismanSlider"></div>
                    </div>
                    @Html.Hidden("powerInTalisman", "16")
                </div>
            }
             
            <input type="submit" value="Generate battleboard" />
         }
        </fieldset>
    </div>
</section>
